<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <style>
    @keyframes aaa{
    	0%{ width: 200px;height:200px;}
    	50%{ width: 400px;height:200px;}
    	100%{width: 400px;height:400px;background: red;}
    }
    div{
      width: 200px;
      height:200px;
      margin-top: 200px ;
      margin-right:0px ;
      background: #ccc;
      float: left;
    }
     @keyframes bbb{
      0%{position: relative;top: 5px;}
      50%{position: relative;top: -5px;}
      100%{position: relative;top: 5px;}
    }
    .box{
      animation-name:aaa;
      animation-duration:2s;
      animation-timing-function:ease-in-out;
      animation-iteration-count:3;
      animation-direction:alternate;
      animation-fill-mode:both;
    }
    .box:hover{
      animation-name:bbb;
       animation-duration:.35s;
    }
  </style>
  <body>
    <button type="button" id="btn">添加</button>
    <div class="box"></div>
    <script>
      btn.onclick =function(){
        let divDOM = document.createElement("div")
        console.log(divDOM)
        document.body.appendChild(divDOM)
        divDOM.classList="box"
      }
    </script>
  </body>
</html>
